import React, { ReactElement } from 'react';
import { Clipboard, View, Image } from 'react-native';
import JSBI from 'jsbi';

import Button from '../../../../components/Button';
import DashLine from '../../../../components/DashLine';
import CustomText from '../../../../components/Text';
import { toolTipOpen } from '../../../../util/global';
import OrderContent from '../OrderContent';
import OrderItem from '../OrderItem';
import { Data as DepositOrderInfo } from '../../../../api/order/getDepositOrderDetail';

import styles from './style';
import { ORDER_STATUS_DESC } from '../../../OrderList/constant';
import { PAY_METHOD_DESC } from '../../constant';
import { spuTag } from '../../../../constant/resource';
import { monthToZhMonth } from '../../../../util/transformDate';
import { transformShowPrice } from '../../../../util/transformMoney';

interface DepositOrderProps extends DepositOrderInfo {
  orderId: string;
}

export default (props: DepositOrderProps): ReactElement => {
  const {
    orderId,
    orderStatus,
    orderAmount,
    payAmount,
    payMethod,
    createTime,
    depositName,
    commodities,
    expireTime
  } = props;

  return (
    <View>
      <OrderItem title="订单信息">
        <View style={styles.list}>
          <OrderContent
            name="订单号："
            detail={JSBI.BigInt(orderId).toString()}
          />
          <OrderContent
            name="订单状态："
            detail={ORDER_STATUS_DESC[orderStatus]}
          />
          <Button
            hitSlop={{ left: 20, top: 20, right: 20, bottom: 20 }}
            text="复制"
            style={styles.copyContent}
            textStyle={styles.copy}
            onPress={(): void => {
              Clipboard.setString(JSBI.BigInt(orderId).toString());
              toolTipOpen({ desc: '复制成功' });
            }}
          />
        </View>
      </OrderItem>
      <OrderItem title="商品信息">
        <View style={styles.depositInfo}>
          <CustomText style={styles.title}>{depositName}</CustomText>
          <CustomText style={styles.subTitle}>
            使用截止时间：{expireTime}
          </CustomText>
          <DashLine
            style={styles.dash}
            length={30}
            dashStyle={styles.dashItem}
          />
        </View>
        <View style={styles.commodityList}>
          <CustomText style={styles.listTitle}>可用于购买以下商品：</CustomText>
          {commodities.map(
            (item): ReactElement => (
              <View style={styles.commodity}>
                <CustomText style={styles.commodityTitle}>
                  {item.commodityName}
                </CustomText>
                <CustomText style={styles.subTitle}>
                  上课时间：{monthToZhMonth(item.startTime)}-
                  {monthToZhMonth(item.stopTime)}
                  {`   `}时长：{item.duration}讲
                </CustomText>
                <Image source={spuTag} style={styles.spuTag} />
              </View>
            )
          )}
        </View>
      </OrderItem>
      <OrderItem title="订单信息">
        <View style={styles.list}>
          <OrderContent
            name="订单金额："
            detail={`¥${transformShowPrice(orderAmount)}`}
          />
          <OrderContent
            name="实际支付："
            detail={`¥${transformShowPrice(payAmount)}`}
          />
          <OrderContent name="支付方式：" detail={PAY_METHOD_DESC[payMethod]} />
          <OrderContent name="下单时间：" detail={createTime} />
        </View>
      </OrderItem>
    </View>
  );
};
